<!DOCTYPE html>
<html>

<head>
    <!-- z-index测试 -->
    <meta charset="utf-8">
    <title>z-index测试</title>


    <style>
        .box1{
            width: 300px;
            height: 300px;
            background-color: bisque;
            /* overflow: hidden; */
            overflow: auto;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: plum;
            position: relative;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: palegreen;
            position: absolute;

            top: 250px;
            z-index: 10;
        }
        .box4{
            width: 100px;
            height: 100px;
            background-color: indianred;
            position: absolute;

            top: 220px;
            z-index: 6;
        }
    </style>

</head>

<body>
    <div class="box1">
        <div class="box2">
            <div class="box3"></div>
            <div class="box4"></div>
        </div>
    </div>

</body>

</html>